# ${className} 前端项目

基于 Vue 3 + TypeScript + Element Plus 的 ${className} CRUD 前端项目。

## 项目简介

本项目由区块链CRUD生成器自动生成，与后端 `${className}` 项目配套使用。

## 技术栈

- **Vue 3.4+** - 渐进式JavaScript框架
- **TypeScript** - JavaScript的超集，提供类型支持
- **Vite** - 下一代前端构建工具
- **Element Plus** - 基于Vue 3的组件库
- **Axios** - HTTP客户端
- **Vue Router 4** - Vue.js官方路由管理器
- **Day.js** - 轻量级日期处理库

## 快速开始

### 1. 安装依赖

```bash
npm install
```

### 2. 配置后端API地址

编辑 `.env` 文件，配置后端API地址：

```env
VITE_API_BASE_URL=http://localhost:8080
```

### 3. 启动开发服务器

```bash
npm run dev
```

### 4. 构建生产版本

```bash
npm run build
```

## 项目结构

```
src/
├── components/          # 通用组件
│   ├── CrudForm.vue    # CRUD表单组件
│   ├── CrudTable.vue   # CRUD表格组件
│   └── ...
├── config/             # 配置文件夹
│   └── entities.ts     # 实体配置文件（已自动生成）
├── types/              # TypeScript类型定义
│   └── entity.ts       # 实体相关类型
├── views/              # 页面组件
│   └── EntityView.vue  # 实体管理页面
├── router/             # 路由配置
├── utils/              # 工具函数
└── main.ts            # 应用入口
```

## 使用说明

### 实体配置

实体配置已自动生成在 `src/config/entities.ts` 文件中，包含以下内容：

- **表名映射** - 与数据库表名对应
- **字段配置** - 每个字段的类型、验证规则等
- **UI设置** - 表单和表格的显示配置
- **API路径** - 与后端接口对应

### 自定义字段

如需修改字段显示或验证规则，请编辑 `src/config/entities.ts` 文件中的对应字段配置。

### 添加新功能

1. **添加新字段**：在后端数据库添加字段后，重新生成前端配置
2. **自定义验证**：在字段配置中添加 validation 属性
3. **自定义显示**：调整 showInTable 和 showInForm 属性

## 与后端集成

### 1. 启动后端服务

确保后端服务已启动，默认端口为8080。

### 2. 配置数据库连接

后端项目已包含数据库连接配置，确保数据库已创建并运行。

### 3. 测试API

可以通过以下方式测试API：
- 直接访问：http://localhost:8080/swagger-ui.html
- 使用Postman测试接口
- 前端页面自动调用

## 开发规范

### 命名规范

- 组件名：PascalCase（如：UserManager.vue）
- 变量名：camelCase（如：userList）
- 常量名：UPPER_SNAKE_CASE（如：API_BASE_URL）

### 代码风格

- 使用TypeScript严格模式
- 组件使用Composition API
- 遵循ESLint规则

## 常见问题

### 1. 跨域问题

如果遇到跨域问题，请检查：
- 后端是否正确配置了CORS
- 前端API地址是否正确

### 2. 类型错误

如果遇到TypeScript类型错误：
- 检查实体配置中的字段类型
- 确保后端字段类型与前端匹配

### 3. 构建失败

如果构建失败：
- 检查Node.js版本（推荐16+）
- 删除node_modules重新安装
- 检查tsconfig.json配置

## 支持

如有问题，请联系：
- 作者：${author}
- 项目地址：[区块链CRUD生成器](https://github.com/your-repo/blockchain-crud-generator)

## 许可证

MIT License